<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="/favicon.ico" />
    <title>Discuss Comments</title>
    <script src="discuss.js"></script>
    <style>
      body {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }

      a {
        font-weight: bold;
        text-decoration: none;
        color: #00c4b6;
      }

      html[theme='dark'] {
        background-color: #333841;
        color: #fff;
      }

      .config {
        padding: 50px;
        position: relative;
        border-radius: 10px;
        background: rgba(128, 128, 128, 0.2);
      }

      .switch-btn {
        right: 50px;
        top: 60px;
        position: absolute;
        margin: -4px 0.4rem 0;
        width: 3rem;
        height: 1rem;
        border-radius: 34px;
        background-color: #00c4b6;
        vertical-align: middle;
        cursor: pointer;
        transition: 0.4s;
      }

      .switch-btn:before {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 50%;
        background-color: #fff;
        content: '';
        transition: 0.4s;
      }

      .off:before {
        transform: translateX(2rem);
      }

      .off {
        background-color: #999;
      }

      .config-item {
        display: flex;
        flex-direction: column;
      }

      .config-item input {
        width: 100%;
        height: 42px;
        color: currentColor;
        font-size: 16px;
        z-index: 10;
        padding: 0 12px;
        margin: 8px 0 20px;
        background: 0 0;
        box-sizing: border-box;
        border-radius: 0.375rem;
        border: 1px solid rgba(128, 128, 128, 0.5);
      }

      .config-item button {
        margin-top: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.9;
        outline: 0;
        line-height: 1;
        width: auto;
        height: 40px;
        cursor: pointer;
        text-align: center;
        font-weight: 600;
        padding: 6px;
        border: 1px solid #f4645f;
        background: #fff;
        transition: 0.1s;
        border-radius: 4px;
        box-sizing: border-box;
        white-space: nowrap;
        user-select: none;
        color: #fff;
        border-color: #f4645f;
        background-color: #f4645f;
        font-size: 1em;
      }

      .config-item button:hover {
        opacity: 1;
      }

      .Discuss-Visitors-Wrap {
        text-align: center;
      }

      @media screen and (max-width: 900px) {
        body {
          padding: 10px;
        }
      }
    </style>
  </head>

  <body>
    <div class="config">
      <span class="switch-btn Dark-Light"></span>
      <div class="config-item">
        <label>Server URLs:</label>
        <input type="text" />
      </div>
      <div class="config-item">
        <label>Unique identifier:</label>
        <input type="text" />
      </div>
      <div class="config-item">
        <!-- <label>PV: <span id="Discuss-Visitors">0</span></label> -->
      </div>
      <div class="config-item">
        <button onclick="init()">Init</button>
      </div>
    </div>
    <div id="Discuss-Comments"></div>
    <script>
      const switchs = document.querySelector('.Dark-Light')
      switchs.addEventListener('click', () => {
        const html = document.querySelector('html')
        const theme = html.getAttribute('theme')
        if (theme) {
          switchs.classList.remove('off')
          html.removeAttribute('theme')
        } else {
          switchs.classList.add('off')
          html.setAttribute('theme', 'dark')
        }
      })

      const url = `//${location.hostname}:6870`

      const ipts = document.querySelectorAll('.config-item input')

      ipts[0].value = localStorage.DServer ? localStorage.DServer : url
      ipts[0].addEventListener('input', () => (localStorage.DServer = ipts[0].value))

      ipts[1].value = localStorage.DUnique ? localStorage.DUnique : location.pathname
      ipts[1].addEventListener('input', () => (localStorage.DUnique = ipts[1].value))

      function init() {
        discuss.init({
          el: '#Discuss-Comments',
          master: 'Main',
          ph: '快来评论呀',
          serverURLs: ipts[0].value,
          path: ipts[1].value,
          // emotCDN: 'https://cdn.jsdelivr.net/npm/discuss@1.1.3'
        })
      }
    </script>
  </body>
</html>
